<template>
 <div class="login_container" :style="{ backgroundImage: 'url(' + urlBg + ')' }">
    <div class="login_box" :style="{ backgroundImage: 'url(' + loginFromBg + ')' }">
      <div class="login_box_from_bg">
        <!-- 登录表单区域 -->
				<div class="gongsiTitle">请联系后台运维人员处理</div>
        <el-form :model="loginForm" label-width="0px" class="login_form">
          <div class="isShowPaddword">
            <el-form-item>
              <el-input v-model="loginFormHidden.phoneno"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="loginFormHidden.password" type="password"></el-input>
            </el-form-item>
          </div>
          <!-- 用户名 -->
          <el-form-item prop="phoneno" class="password-bg">
            <el-input
              prefix-icon="el-icon-user-solid"
              size="large"
              v-model="loginForm.phoneno"
              placeholder="请输入您的手机号"
            >
              <template slot="append">
                <span @click.stop="sndSmsCode" :disabled="abb_disabled_sms" >{{btnTitle}}</span>
              </template>
            </el-input>
          </el-form-item>

          <!-- 验证码,按参数可选的-->
          <el-form-item prop="yzmCode" class="yzmCode-bg">
            <el-input
              class="input_yzm"
              prefix-icon="el-icon-lollipop"
              size="large"
              v-model="loginForm.yzmCode"
              placeholder="请输入短信验证码"
            >
						</el-input>
          </el-form-item>

					<!-- 密码 -->
					<el-form-item prop="password" class="password-bg">
					  <el-input
					    prefix-icon="el-icon-lollipop"
					    size="large"
					    v-model="loginForm.password"
					    type="password"
					    placeholder="请输入使用的新密码"
					  ></el-input>
					</el-form-item>

					<!-- 密码 -->
					<el-form-item prop="password2" class="password-bg">
					  <el-input
					    prefix-icon="el-icon-lollipop"
					    size="large"
					    v-model="loginForm.password2"
					    type="password"
					    placeholder="请再次输入您的密码"
					  ></el-input>
					</el-form-item>

          <el-form-item style="width: 100%">
						<el-button type="primary" class="btn"   @click.prevent="chgPwClick" :loading="loading" @keyup.enter="chgPwClick" :disabled="isAllowClick" >重置密码</el-button>
          </el-form-item>

					<div class="remember">
						<el-button type="text" @click="goRouter()">返回登录</el-button>
					</div>
        </el-form>
      </div>
    </div>

    <!-- 弹出用输入图片验证码的界面 -->
		<el-dialog :visible.sync="ibshowPicRndInput"  width="400px" class="elDialogWarp" >
				<div slot="title" class="header-title">
					<span class="title-icon"><i class="el-icon-s-tools"></i></span>
					<span class="title-name">{{ishowPicRndMode_SMS_RGP=='SMS'?'图片验证码':'图片验证码'}}</span>
				</div>

				<div class="yzmProp">
					<div class="picrnd_con">
						<el-input v-model="picyzm" placeholder="请输入右侧验证码" size="large" ></el-input>
						<img :src="picyzmurl" @click.stop="regetPicyzm" class="yzmCodeImg"/>
					</div>
					<div class="tpkbc" @click.stop="regetPicyzm">看不清，换一张</div>
				</div>

				<div slot="footer" class="dialog-footer">
						<el-button @click.native="ibshowPicRndInput = false" size="mini">取消</el-button>
						<el-button @click="picrndInputOk" size="mini" type="primary" >确认</el-button>
				</div>
		</el-dialog>
    <!--弹出用输入图片验证码的界面  END -->

  </div>
</template>

<script>

export default {
  name: 'forgotpswd',
  data () {
    return {
			// urlBg: require("@/../static/abbimg/login_bg.jpg"),
			// loginFromBg: require("@/../static/abbimg/loginFrom_bg.png"),
			logining:false,
      loginFormHidden: { phoneno: "", password: "", },
      loginForm :{
        phoneno : '', //读取本地存储的用户名和密码,
        password : '',
        password2 : '',
        yzmCode :''
      },
      ishowPicRndMode_SMS_RGP :'',
      ibshowPicRndInput : false, //是否显示图形验证码窗口
      picyzmurl :'', picyzm :'', //图形验证码的路径
      abb_disabled_sms :'', btnTitle :'获取验证码', //发短信的时间间隔
      // 这是表单的验证规则对象
      rules_phoneno :[ // 验证手机号是否合法
			    { required: true, message: "请输入手机号", trigger: "blur" },
			    {
			      min: 11, max: 11,
			      message: "长度在 11 个字符",
			      trigger: "blur",
			    },
      ],
      rules_password :[ // 验证新密码是否合法
        { required: true, message: "请输入新密码", trigger: "blur" },
        {
          min: 3, max: 20,
          message: "长度在 6 到 15 个字符",
          trigger: "blur",
        },
      ],

      rules_yzmCode : { // 验证码是否合法
			  yzmCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
			},
			loading:false,
    }
  },
  methods: {
		goRouter(){
			this.$router.push({ path: '/f0login' })
    },
    //
    regetpicyzm :function(){ //重新获取图像验证码
      var timenow = new Date().getTime(); this.picyzm = ''; //图片验证码
      this.picyzmurl = this.URLBASE+'public'+'/'+'random.jsp?randomname=waprgpchk&d='+timenow;
    },
    //第一步,让其可发短信(需弹出图片验证码)
    sndSmsCode :function(){
      var _self = this;
      if(this.loginForm.phoneno > ''){
        if(!/^1\d{10}$/.test(this.loginForm.phoneno)) {
          _self.$notify.error({title: '提示', message:'请输入正确的手机号'});
          return;
        }
      }else {
        _self.$notify.error({title: '提示', message:'手机号码不能为空'});
        return;
      }
      this.ishowPicRndMode_SMS_RGP = 'SMS';
      this.ibshowPicRndInput = true; this.picyzm = ''; //输入码清空, 显示输入图片验证码的弹出窗口
      this.regetpicyzm(); //刷新图像
    },
    //第二步,执行实际的发短信操作,或者重置密码操作
    picrndInputOk :function(){ //输入图片验证码后的回调
      var _self = this;
      if(this.picyzm > ''){}else{
        _self.$notify.error({title: '提示', message:'请先输入图片验证码！'});
        return;
      }
      if(this.ishowPicRndMode_SMS_RGP == 'SMS'){
        this.sndSmsCode_real();
      }else if(this.ishowPicRndMode_SMS_RGP == 'RGP'){
        this.chgPwClick_real();
      }else{
        _self.$notify.error({title: '提示', message:'获取输入图片验证码的前置业务错,不能继续!'});
        return;
      }
      this.ibshowPicRndInput=false; //关闭弹出输入框
    },
    //第3步,点击重置密码按钮,检查输入项,然后弹出图片验证码窗口,
    chgPwClick :function(){
      this.loading = true; var _self = this;
      //
      if(this.loginForm.password == null || this.loginForm.password == "") {
        _self.$notify.error({title: '提示', message:'请输入新密码!'});  return;
      }
      if(this.loginForm.password2 == null || this.loginForm.password2 == "") {
        _self.$notify.error({title: '提示', message:'请再次输入新密码!'});  return;
      }
      if(this.loginForm.password != this.loginForm.password2){
        _self.$notify.error({title: '提示', message:'两次输入的新密码不一致,不能重置!'});  return;
      }
      var t_val = this.loginForm.password;
      if( t_val && t_val > '' && t_val.length >=6 &&(/^.*[a-z]+.*$/.test(t_val))&&(/^.*[A-Z]+.*$/.test(t_val))&&(/^.*[0-9]+.*$/.test(t_val)) ){}else{
        _self.$notify.error({title: '提示', message:'密码由6-15位字符组成，至少包含字母和数字，字母区分大小写!'});  return;
      }
      //
      if(this.loginForm.phoneno == null || this.loginForm.phoneno == "") {
        _self.$notify.error({title: '提示', message:'请输入手机号码!'});  return;
      }
      if(this.loginForm.yzmCode == null || this.loginForm.yzmCode == "") {
        _self.$notify.error({title: '提示', message:'请输入接收到的短信验证码!'});  return;
      }

      this.ishowPicRndMode_SMS_RGP = 'RGP';
      this.ibshowPicRndInput = true; this.picyzm = ''; //输入码清空
      this.regetpicyzm(); //刷新图像

    },

    //第4步.执行发送手机验证码的操作
    sndSmsCode_real :function(){
      var _self = this;
      //获取验证码
      if(!this.isInputedPhonePicyzm()) { return ;}
      this.disabledFor60Sec();
      var rnd=Math.random(); rnd=Math.floor(rnd*10000);
      //发送网络请求,向指定的手机发送验证码
      var ldemodata = [{retval:0, errmsg:'提交成功'},]
      this.MYPOST({'method':'sendsmschk', 'rand':rnd,  //查询时传入的id
        'typ':'rgp', "smsyzm":this.picyzm,"uphone":this.loginForm.phoneno,
      },'发短信',false, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
        _self.regetpicyzm(); _self.loading = false;
        if(ret_iserr){ //传入的true参数,理论上不会有此回调了
          _self.$notify.error({title: '提示', message:'发短信失败,'+ret_errmess});  return;
        }else{
          if(ret_obj == null){ //{\"ret_code\":\""+ls_code+"\",\"ret_mess\":\""+ls_mess+"\"} //ret_code = 0 为成功
            if(parseInt(ret_oldresp.data.ret_code) == 0)
            {
              _self.$notify.success(ret_oldresp.data.ret_mess); _self.picyzm = '';
            }else{
              _self.$notify.error({title: '提示', message:'短信发送失败'+ret_oldresp.data.ret_mess});  return;
            }
          }else{
            _self.$notify.error({title: '提示', message:'短信发送失败'});  return;
          }
        }
      });
    },

    isInputedPhonePicyzm :function(){
      //判断输入的手机号是否合法
      this.errors ={};
      if(!this.loginForm.phoneno) {
        this.errors.phoneno = "手机号码不能为空";
      } else if(!/^1\d{10}$/.test(this.loginForm.phoneno)) {
        this.errors.phoneno ="请输入正确的手机号";
      } else if(!this.picyzm) {
        this.errors.picyzm = "图形验证码不能为空"
      }else{
        return true
      }
      return false;
    },

    disabledFor60Sec :function(){ //发短信按钮禁用60秒
      //倒计时
      let time = 60;
      let timer = setInterval(() => {
        if(time == 0) {
          clearInterval(timer);
          this.abb_disabled_sms = false;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle =time + '秒后重试';
          this.abb_disabled_sms = true;
          time--
        }
      },1000)
    },

    //第5步.执行重置密码的提交操作
    chgPwClick_real :function(){
      this.errors ={}; var is_error = false; var _self = this;
      if(this.loginForm.password == null || this.loginForm.password == "")
      {
        this.errors.password = "请输入新密码";  is_error = true;
      }
      if(this.loginForm.password2 == null || this.loginForm.password2 == "")
      {
        this.errors.password2 = "请再次输入新密码";  is_error = true;
      }
      if(this.loginForm.password != this.loginForm.password2)
      {
        this.errors.password2 = "您两次输入新密码不一致！";  is_error = true;
      }
      if(this.loginForm.phoneno == null || this.loginForm.phoneno == "")
      {
        this.errors.phoneno = "请输入手机号码！";  is_error = true;
      }
      if(this.picyzm == null || this.picyzm == "")
      {
        this.errors.picyzm = "请输入图片上显示的验证码！";  is_error = true;
      }
      if(this.loginForm.yzmCode == null || this.loginForm.yzmCode == "")
      {
        this.errors.yzmCode = "上面输入手机号及图片验证码后,点击发短信按钮,此处输入接收到的短信验证码！";  is_error = true;
      }
      if(is_error){return;}
      // "isajax" "yzm" "phoneno" phonesms" passw"
      var rnd=Math.random(); rnd=Math.floor(rnd*10000);
      //原型阶段用到的字段,及字段的demo值!!!
      var ldemodata = [{retval:0, errmsg:'提交成功'},]
      this.MYPOST({'method':'doresetpass', 'rand':rnd,  //查询时传入的id
        'isajax':'Y', "yzm":this.picyzm,"phoneno":this.$encrypt(this.loginForm.phoneno),"phonesms":this.loginForm.yzmCode,"passw":this.$encrypt(this.loginForm.password),
      },'重置密码',false, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
        _self.loading = false;
        _self.regetpicyzm();
        if(ret_iserr){ //传入的true参数,理论上不会有此回调了
          _self.$notify.error({title: '提示', message:'重置密码失败,'+ret_errmess});  return;
        }else{
          _self.$notify.success('密码重置成功请点击确认返回登录');
          _self.goRouter();
        }
      });
    },

  },
  components:{

  },
  computed: {
     //手机号和验证码都不能为空
    isAllowClick(){
      if(!this.loginForm.phoneno || !this.loginForm.yzmCode || !this.loginForm.password || !this.loginForm.password2) { //|| !this.picyzm
        return true //有空着的时候,不允许提交
      } else {
        return false
      }
    }
  },
  mounted :function(){
    var _self = this; window.GWO().debug=this;
    var timenow = new Date().getTime();
    setTimeout(function(){
      _self.picyzmurl =  _self.URLBASE+'public'+'/'+'random.jsp?randomname=waprgpchk&d='+timenow;
    },300);
  }
}

</script>
<style scoped lang="scss">

.login_container {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  height: 100%;
}
.login_box {
  width: 812px;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  box-sizing: border-box;
  .login_box_from_bg {
		.gongsiTitle{
			width: 100%;
			height: 100px;
			display:flex;
			align-items: center;
			font-size:28px;
			color: #FF000F;
			font-weight: bold;
		}
    width: 420px;
    height: 100%;
    box-sizing: border-box;
    padding-left:50px;
    padding-right: 50px;

  }
}
.login_logo {
  width: 100%;
  display: flex;
  justify-content: center;
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}
.login_title {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 45px;
  font-size: 20px;
  font-weight: bold;
}
.btn {
	width: 100%;
	border-radius:30px;
}



.remember {
  margin-top:20px;
  margin-bottom: 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.forgetPassword {
  text-align: center;
  text-decoration: none;
  color: #5a80fe;
  font-size: 16px;
  font-weight: 400;
  color: #5a80fe;
  &:hover {
    color: #409eff;
  }
}
.password-bg {
  margin-bottom: 25px;
}
.isShowPaddword {
  width: 0px;
  height: 0px;
  overflow: hidden;
}


.yzmCode-bg{
	position: relative;
	margin-top: 10px;
	.yzmImg{
		position: absolute;
		right: 1px;
		top: 1px;
		width: 100px;
		height: 38px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
}

.login_form{
	background-color: #fff;
	width: 100%;
	height: 350px;
}


.yzmProp{
	margin-top: 20px;
	width: 100%;
	height: 100%;
	position: relative;
	.yzmCodeImg{
		position: absolute;
		right: 1px;
		top: 1px;
		height: 38px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
	}
	.tpkbc{
		width: 100%;
		text-align: right;
		font-size: 12px;
		margin-top: 5px;
	}
}

</style>

